<template>
  <div class="new-clue-detail">
    <div class="header-titles"> 产品 </div>
    <div class="header-btn flex justify-around items-center mb-12px">
      <div class="btn-left">
        <span> {{ productValue.name }}</span>
        <div class="ml-16px flex items-center">
          <div class="h-32px w-26px flex justify-center items-center next-prod">
            <el-button
              @click="emit('prev')"
              style="border: none; padding: 0; width: 100%"
              :disabled="isLoad"
            >
              <el-icon size="14"><ArrowLeftBold /></el-icon>
            </el-button>
          </div>
          <div class="ml-8px h-32px w-26px flex justify-center items-center next-prod">
            <el-button
              @click="emit('next')"
              style="border: none; padding: 0; width: 100%"
              :disabled="isLoad"
            >
              <el-icon size="14"><ArrowRightBold /></el-icon>
            </el-button>
          </div>
        </div>
      </div>
      <div class="btn-right">
        <!-- 编辑 -->
        <el-button type="primary" style="background-color: #0052cc" @click="openForm">
          <el-icon size="14"><Edit /></el-icon>
          编辑
        </el-button>
        <el-tooltip class="box-item" effect="dark" content="删除" placement="top">
          <el-button style="background-color: #ebecf0" class="!p-8px" @click="delReceivablePlan">
            <el-icon color="#4b5a74" size="14"><Delete /></el-icon>
          </el-button>
        </el-tooltip>
      </div>
    </div>
    <div class="flex items-center lab-x">
      <div class="labels"> 产品类别: </div>
      <div class="cen">{{ productValue.categoryName }}</div>
    </div>
    <div class="flex items-center lab-x">
      <div class="labels"> 产品单位: </div>
      <div class="cen"
        ><dict-tag :type="DICT_TYPE.CRM_PRODUCT_UNIT" :value="productValue.unit"
      /></div>
    </div>
    <div class="flex items-center lab-x">
      <div class="labels"> 产品价格: </div>
      <div class="cen !color-#ff991f">
        {{ erpPriceInputFormatter(productValue.price) }}
      </div>
    </div>
    <div class="flex items-center lab-x">
      <div class="labels"> 计划回款日期: </div>
      <div class="cen">{{ formatDate(productValue.returnTime) }}</div>
    </div>
    <div class="flex items-center lab-x">
      <div class="labels"> 产品编码: </div>
      <div class="cen">{{ productValue.no }}</div>
    </div>
    <div class="flex items-center lab-x">
      <div class="labels"> 状态: </div>
      <div class="cen"
        ><dict-tag :type="DICT_TYPE.CRM_PRODUCT_STATUS" :value="productValue.status"
      /></div>
    </div>
  </div>
  <CrmTransferForm ref="transferFormRef" @success="emit('closeDrawer')" />
  <ProductForm ref="formRef" @success="getProduct" />
</template>
<script setup>
import { DICT_TYPE } from '@/utils/dict'
import CrmTransferForm from '@/views/crm/permission/components/TransferForm.vue'
import PermissionList from '@/views/crm/permission/components/PermissionList.vue'
import { formatDate } from '@/utils/formatTime'
import ContactForm from '@/views/crm/contact/ContactForm.vue'
import ProductForm from '../ProductForm.vue'
import * as ContactApi from '@/api/crm/contact'
import { erpPriceInputFormatter } from '@/utils'
import * as ProductApi from '@/api/crm/product'

const permissionListRef = ref(PermissionList)
const message = useMessage()
import {
  ArrowLeftBold,
  ArrowRightBold,
  Edit,
  Switch,
  UserFilled,
  Grid,
  Delete,
  Paperclip
} from '@element-plus/icons-vue'

const visible = ref(false)
const props = defineProps({
  productValue: Object,
  isLoad: Boolean
})
const emit = defineEmits(['getProductValue', 'closeDrawer', 'refreshPage', 'prev', 'next'])
/**重新获取产品详情*/
const getProduct = () => {
  emit('getProductValue')
  emit('refreshPage')
}
/**编辑*/
const formRef = ref()
const openForm = () => {
  formRef.value?.open('update', props.productValue.id)
}
/**删除回款*/
const delReceivablePlan = async () => {
  await message.confirm(`确定要删除此产品吗？`)
  await ProductApi.deleteProduct(props.productValue.id)
  message.success('删除成功')
  emit('closeDrawer')
  emit('refreshPage')
}
</script>
<style scoped>
.new-clue-detail {
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 8px #172b4d1a;
  margin: 0 8px;
  padding: 16px;
  margin-bottom: 20px;
  .header-titles {
    color: #6b778c;
    font-size: 14px;
    margin-bottom: 2px;
  }
  .header-btn {
    .btn-left {
      color: #172b4d;
      flex: 1;
      font-size: 24px;
      font-weight: 700;
      overflow: hidden;
      text-overflow: ellipsis;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
      display: flex;
      align-items: center;
    }
    .btn-right {
      flex: 1;
      display: flex;
      justify-content: flex-end;
      align-items: center;
    }
  }
}
.next-prod {
  cursor: pointer;
}
.next-prod:hover {
  background-color: #f5f7fa;
}
.labels {
  color: #6b778c;
  margin-right: 8px;
  font-size: 14px;
}
.lab-x {
  line-height: 24px;
}
.cen {
  color: #172b4d;
  font-size: 14px;
}
.group-name {
  font-size: 14px;
  color: #42526e;
  font-size: 14px;
  margin: 8px 0;
}
</style>
